<template>
	<div>
		<!-- 面包屑导航区 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
		  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
		  <el-breadcrumb-item>群组</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片视图区域 -->
		<el-card>
			<el-row :gutter="20">
				<el-col :span="12">
					<!-- 搜索与添加区域 -->
					<el-input  v-model="queryInfo.query" placeholder="请输入内容" clearable @clear="SerchByName">
					   <el-button slot="append" icon="el-icon-search"  @click="SerchByName"></el-button>
					</el-input>
				</el-col>
				<el-col :span="3">
					<el-button type="primary" @click="Create()">创建群组</el-button>
				</el-col>
			</el-row>
			<!-- 群组列表区域 -->
			<el-table stripe border :data="groupList.slice((currentPage-1)*pageSize,currentPage*pageSize)">
				<el-table-column label="名称" prop="name"></el-table-column>
				<el-table-column label="类型" prop="groupType"></el-table-column>
				<!-- <el-table-column label="已有人数" prop="  "></el-table-column> -->
				<el-table-column label="最多人数" prop="number"></el-table-column>
				<el-table-column label="操作">
				      <template slot-scope="scope">
						<el-button
						  size="mini"
						  type="primary"
						  @click=" ">加入</el-button>
				        <el-button
				          size="mini"
						  type="info"
				          @click="handleDetails(scope.$index, scope.row)">查看</el-button>
						  <!-- scope.$index→拿到每一行的index;scope.$row→拿到每一行的数据-->
				      </template>
				    </el-table-column>
			</el-table>
			
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
			 :page-sizes="[1, 2, 5, 10]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="groupList.length">
			</el-pagination>
		</el-card>	
	</div>
</template>

<script>
	export default{
		data() {
			return {
				groupList:[],
				
				queryInfo:{
						query: '',
						pageNum: 1,
						pageSize: 1,
						},
						
				currentPage: 1, // 当前页码
				total: 20, // 总条数
				pageSize: 2 ,// 每页的数据条数
			}
		},
		created() {
			this.getGroupList()
			this.SerchByName()
		},
		methods: {
			Create() {
				this.$router.push({path:"/Group/CreateGroup"});
			},
			async getGroupList() {
				const {data: res_j} = await this.$http.get("groups");
				var res = JSON.parse(res_j);//json转换为js对象
				//console.log(res);
				if(res.flag !=200){
					return this.$message.error("获取群组列表失败！");
				}
				this.groupList = res.groups;
			},
			
			
			async SerchByName () {
				  //console.log(this.queryInfo);
			     const { data:resString1 } = await this.$http.get('serchByName',{params:this.queryInfo})
				  //console.log(resString1);
				  var res1 = JSON.parse(resString1); //json转换为js对象
				  //console.log(res1);
				  this.groupList = res1.data;
			},
			
			handleDetails(index,row){
				/* console.log(index,row);
				console.log(index);
				console.log(row); */	
				this.$router.push({
					path:"/Group/GroupDetails",
					query:{
						name: "ming",
						Rname:row.name,
						allInfo:row,
						},
					});
			},
			
			
			/* 分页功能的实现 */
			handleSizeChange(val) {
			  console.log(`每页 ${val} 条`);
			  this.currentPage = 1;
			  this.pageSize = val;
			},
			handleCurrentChange(val) {
			  console.log(`当前页: ${val}`);
			  this.currentPage = val;
			},
			
		},
	}
</script>

<style lang="less" scoped>
	.el-breadcrumb{
		margin-top: 10px;
		margin-left: 8px;
		margin-bottom: 10px;
		font-size: 15px;
	}
	.el-card{
		box-shadow: 0 1px 1px rgba(0,0,0,0.15);
	}
	
</style>
